<template>
    <el-dialog 
        v-dialogDrag
		v-bind="$attrs"
        :title="dialogTitle"
        :append-to-body="true"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        width="40%"
        style="padding: 10px 20px;"
        :before-close="cancelBtn"
    >
        <div class="baseinfo-form">
            <el-form 
                :model="interfaceForm" 
                :rules="rules" 
                ref="interfaceForm" 
                label-width="100px" 
                :validate-on-rule-change="false"
            >
                                        
                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="F_Name" label="接口分类名称">
                            <el-input placeholder="请输入接口分类名称" size="small" v-model="interfaceForm.F_Name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="F_EnCode" label="接口分类编码">
                            <el-input placeholder="请输入接口分类编码" size="small" v-model="interfaceForm.F_EnCode"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="F_ParentId" label="接口分类上级">
                            <!-- 接口分类上级下拉选择树***尚未处理 -->
                            <avue-input-tree
                                default-expand-all
                                v-model="interfaceForm.F_ParentId"
                                :placeholder="$t('menuManagement.addModal.placeholderSuperior')"
                                type="tree"
                                :dic="defaultTree"
                                size="small"
                                style="width: 100%"
                            >
                            </avue-input-tree>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="F_SortCode" label="排序">
                            <el-input 
                                placeholder="请输入排序号" 
                                size="small" 
                                type="number" 
                                v-model="interfaceForm.F_SortCode"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="F_Description" label="备注">
                            <el-input
                                type="textarea"
                                :placeholder="$t('workFlow.addStamp.placeholderRemark')"
                                size="small"
                                v-model="interfaceForm.F_Description"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>        
        </div>
        <span class="dialog-footer" slot="footer">
            <el-button size="mini" @click="cancelBtn()">{{$t('buttonModule.modalCancelBtn')}}</el-button>
            <el-button 
                type="primary" 
                size="mini" 
                @click="submitBtn()" 
                :loading="flagInterface"
            >{{flagInterface?$t('workFlow.WFMenu.hintSubmit'):$t('buttonModule.modalSureBtn')}}</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { FormatTree } from "../../../util/util.js";
// import {getDictCateByCode} from '@/api/language/dictionary';
import {getInterfaceCategoryList,deleteInterfaceCategory,addInterfaceCategory,updateInterfaceCategory} from '@/api/systemManagement/interfaceCategory';



export default {
    name: "AddInterfaceCategory",
    props:{
        dialogTitle: {
            type: String,
        },
        CategoryId: {//绑定F_Id
            type: String,
        },
        interfaceForm: {
            type: Object,
            default: function () {
                return {
                    F_Name: "",
                    F_EnCode: "",
                    F_ParentId: "",
                    F_Description: "",
                    F_SortCode: ""
                };
            },
        },
        defaultTree: {
            type: Array,
            default: function () {
                return []
            }
        }
    },
    data () {
        return {
            flagInterface: false,
            rules: {
                F_Name: [
                    {required: true, message: '请输入接口分类名称', trigger: 'blur'}
                ],
                F_EnCode: [
                    {required: true, message: '请输入接口分类编码', trigger: 'blur'}
                ],
                F_ParentId: [
                    {required: true, message: '请选择接口分类上级', trigger: 'change'}
                ],
            },
        };
    },
    mounted () {
        this.getInterfaceCategoryList()
    },
    methods: {
         /*获取分类 */
        getInterfaceCategoryList () {
            getInterfaceCategoryList().then(res => {
                this.defaultTree = FormatTree(
                    res.data.data,
                    "F_Id",
                    "F_Name",
                    "children"
                );
                })
        },
        /* 提交表单 */
        submitBtn() {
			this.flagInterface = true;
			if (this.CategoryId) {
				updateInterfaceCategory(this.CategoryId,this.interfaceForm).then(() => {
					this.$emit('update:visible', false);	
					this.$emit('submitRes',true)
					this.CategoryId="";
				}).finally(() => {
					this.flagInterface = false;
				})
			} else {
				addInterfaceCategory(this.interfaceForm).then(() => {
					this.$emit('update:visible', false);
					this.$emit('submitRes',true)
				}).finally(() => {
					this.flagInterface = false;
				})                          
			}
        },
        cancelBtn(){
			this.$emit('update:visible', false);			
		},
        validateData() {
            let flag = false;
            this.$refs["interfaceForm"].validate((valid) => {
                flag = valid;
            });
            return flag;
        },
    }
}
</script>
